/*
 * @Author: xiaosihan 
 * @Date: 2024-10-20 07:52:32 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-20 18:37:38
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./adminUserManage.module.less";
import { Table, TableColumnType } from "antd";
import adminUserStore from "./adminUserStore";
import adminApi from "@api/adminApi";

interface Iprops {
    children?: ReactNode
}

export default function AdminUserManage() {

    const dom = useRef<HTMLDivElement | null>(null);


    const [pageNum, setPageNum] = useState(adminUserStore.pageNum);
    const [pageSize, setPageSize] = useState(adminUserStore.pageSize);
    const [list, setList] = useState(adminUserStore.list);
    const [total, setTotal] = useState(adminUserStore.total);

    useEffect(() => {
        adminUserStore.getList();
    }, []);

    useEffect(() => autorun(() => {
        setPageNum(adminUserStore.pageNum);
        setPageSize(adminUserStore.pageSize);
        setList(adminUserStore.list);
        setTotal(adminUserStore.total);
    }, { delay: 10 }), []);

    const columns: Array<TableColumnType> = [
        {
            title: '用户ID',
            align: "left",
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '手机号',
            align: "center",
            dataIndex: 'phone',
            key: 'phone'
        },
        {
            title: '标签',
            align: "center",
            dataIndex: 'remark',
            key: 'remark'
        },
        {
            title: '用户类别',
            align: "center",
            dataIndex: 'type',
            key: 'type'
        },
        {
            title: '模型',
            align: "center",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '订单',
            align: "center",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '是否可用',
            align: "center",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '注册时间',
            align: "center",
            dataIndex: 'updateTime',
            key: 'updateTime'
        },
        {
            title: '操作',
            align: "center",
            dataIndex: 'content',
            key: 'content'
        }
    ]

    return (
        <div
            ref={dom}
            className={styles.adminUserManage}
        >
            <div className={styles.title} >用户管理</div>

            <Table
                columns={columns}
                dataSource={list}
                pagination={{
                    total: total,
                    current: pageNum,
                    pageSize: pageSize,
                    onChange(pageNum, pageSize) {
                        adminUserStore.getList({ pageNum, pageSize });
                    },
                }}
            />

        </div>
    );

}